<template>
  <view class="product-detail">
    <!-- 商品内容 -->
    <view class="product-content">
      <!-- 商品图片轮播 -->
      <view class="product-images">
        <swiper class="image-swiper" :indicator-dots="true" :autoplay="false" :interval="3000" :duration="500">
          <swiper-item v-for="(image, index) in productDetail.images" :key="index">
            <image :src="image.url" mode="aspectFill" class="swiper-image" @click="handlePreviewImage(index)"></image>
          </swiper-item>
        </swiper>
        
        <!-- 商品标签 -->
        <view class="product-badges">
          <view v-if="productDetail.isHot" class="badge hot-badge">
            <text class="badge-text">热销</text>
          </view>
          <view v-if="productDetail.discount" class="badge discount-badge">
            <text class="badge-text">{{ productDetail.discount }}折</text>
          </view>
        </view>
      </view>

      <!-- 商品基本信息 -->
      <view class="product-info">
        <view class="info-header">
          <text class="product-title">{{ productDetail.title }}</text>
          <view class="product-category">
            <u-tag 
              :text="productDetail.category" 
              type="error"
              size="normal"
            ></u-tag>
          </view>
        </view>

        <view class="info-body">
          <text class="product-description">{{ productDetail.description }}</text>
        </view>

        <view class="info-meta">
          <view class="price-section">
            <view class="current-price">¥{{ productDetail.currentPrice }}</view>
            <view v-if="productDetail.originalPrice" class="original-price">¥{{ productDetail.originalPrice }}</view>
            <view class="discount-info">
              <text class="discount-text">省¥{{ (productDetail.originalPrice - productDetail.currentPrice).toFixed(2) }}</text>
            </view>
          </view>
          
          <view class="progress-section">
            <view class="progress-header">
              <text class="progress-label">团购进度</text>
              <text class="progress-count">{{ productDetail.soldCount }}/{{ productDetail.targetCount }}人</text>
            </view>
            <view class="progress-bar">
              <view class="progress-fill" :style="{ width: productDetail.progress + '%' }"></view>
            </view>
            <text class="progress-text">还差{{ productDetail.targetCount - productDetail.soldCount }}人成团</text>
          </view>
        </view>
      </view>

      <!-- 商品详情 -->
      <view class="product-details">
        <view class="section-title">
          <u-icon name="file-text" size="16" color="#ff4d4f"></u-icon>
          <text class="title-text">商品详情</text>
        </view>
        <view class="details-content">
          <rich-text :nodes="productDetail.content"></rich-text>
        </view>
      </view>

      <!-- 规格参数 -->
      <view class="product-specs">
        <view class="section-title">
          <u-icon name="list" size="16" color="#ff4d4f"></u-icon>
          <text class="title-text">规格参数</text>
        </view>
        <view class="specs-content">
          <view 
            v-for="(spec, index) in productDetail.specs" 
            :key="index"
            class="spec-item"
          >
            <text class="spec-label">{{ spec.label }}</text>
            <text class="spec-value">{{ spec.value }}</text>
          </view>
        </view>
      </view>

      <!-- 团购须知 -->
      <view class="group-buying-notice">
        <view class="section-title">
          <u-icon name="info-circle" size="16" color="#ff4d4f"></u-icon>
          <text class="title-text">团购须知</text>
        </view>
        <view class="notice-content">
          <view 
            v-for="(notice, index) in productDetail.notices" 
            :key="index"
            class="notice-item"
          >
            <text class="notice-text">{{ notice }}</text>
          </view>
        </view>
      </view>

      <!-- 用户评价 -->
      <view class="product-reviews">
        <view class="section-title">
          <u-icon name="star" size="16" color="#ff4d4f"></u-icon>
          <text class="title-text">用户评价</text>
          <text class="review-count">({{ productDetail.reviews.length }})</text>
        </view>
        <view class="reviews-content">
          <view 
            v-for="(review, index) in productDetail.reviews" 
            :key="index"
            class="review-item"
          >
            <view class="review-header">
              <view class="user-info">
                <text class="user-name">{{ review.userName }}</text>
                <view class="rating">
                  <u-rate 
                    :value="review.rating" 
                    :count="5" 
                    :size="12" 
                    active-color="#ff4d4f"
                    inactive-color="#d9d9d9"
                    readonly
                  ></u-rate>
                </view>
              </view>
              <text class="review-time">{{ review.time }}</text>
            </view>
            <text class="review-content">{{ review.content }}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 底部操作栏 -->
    <view class="bottom-actions">
      <view class="action-left">
        <view class="action-btn" @click="handleLike">
          <u-icon name="heart" size="18" :color="isLiked ? '#ff4757' : '#999'"></u-icon>
          <text class="btn-text" :class="{ liked: isLiked }">{{ isLiked ? '已点赞' : '点赞' }}</text>
        </view>
        <view class="action-btn" @click="handleCollect">
          <u-icon name="star" size="18" :color="isCollected ? '#ffa502' : '#999'"></u-icon>
          <text class="btn-text" :class="{ collected: isCollected }">{{ isCollected ? '已收藏' : '收藏' }}</text>
        </view>
      </view>
      
      <view class="action-right">
        <view 
          class="group-buy-btn" 
          :class="getButtonClass(productDetail.status)"
          @click="handleGroupBuy"
        >
          <text class="btn-text">{{ getButtonText(productDetail.status) }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'

// 商品详情数据
const productDetail = reactive({
  id: 1,
  title: '新鲜有机蔬菜套餐',
  category: '生鲜食品',
  status: 1,
  statusText: '团购中',
  description: '包含西红柿、黄瓜、茄子、青椒等时令蔬菜，新鲜采摘，营养丰富，绿色健康，是家庭餐桌的必备选择。',
  currentPrice: 29.9,
  originalPrice: 39.9,
  soldCount: 45,
  targetCount: 100,
  progress: 45,
  isHot: true,
  discount: 7.5,
  images: [
    {
      url: 'https://example.com/images/vegetables-1.jpg',
      name: '蔬菜套餐1'
    },
    {
      url: 'https://example.com/images/vegetables-2.jpg',
      name: '蔬菜套餐2'
    },
    {
      url: 'https://example.com/images/vegetables-3.jpg',
      name: '蔬菜套餐3'
    }
  ],
  content: `
    <p>我们的有机蔬菜套餐包含：</p>
    <p><strong>西红柿：</strong>新鲜采摘，口感酸甜，富含维生素C</p>
    <p><strong>黄瓜：</strong>清脆爽口，水分充足，适合生吃或凉拌</p>
    <p><strong>茄子：</strong>肉质鲜嫩，营养丰富，适合多种烹饪方式</p>
    <p><strong>青椒：</strong>色泽鲜艳，口感清脆，富含维生素</p>
    <p>所有蔬菜均采用有机种植方式，无农药残留，绿色健康，是您家庭餐桌的最佳选择。</p>
  `,
  specs: [
    { label: '商品名称', value: '新鲜有机蔬菜套餐' },
    { label: '商品重量', value: '约2.5kg' },
    { label: '包装方式', value: '环保包装' },
    { label: '保质期', value: '3-5天' },
    { label: '储存方式', value: '冷藏保存' },
    { label: '产地', value: '本地有机农场' }
  ],
  notices: [
    '团购成功后，商品将在24小时内发货',
    '商品支持7天无理由退换货',
    '如有质量问题，请联系客服处理',
    '团购价格仅限本次活动，过期无效',
    '商品图片仅供参考，以实物为准'
  ],
  reviews: [
    {
      userName: '张女士',
      rating: 5,
      time: '2025-01-20',
      content: '蔬菜很新鲜，包装也很好，价格实惠，下次还会购买。'
    },
    {
      userName: '李先生',
      rating: 4,
      time: '2025-01-18',
      content: '质量不错，配送及时，性价比很高，推荐给大家。'
    },
    {
      userName: '王女士',
      rating: 5,
      time: '2025-01-15',
      content: '有机蔬菜就是不一样，口感很好，家人很喜欢。'
    }
  ]
})

// 用户操作状态
const isLiked = ref(false)
const isCollected = ref(false)

// 获取按钮样式类
const getButtonClass = (status: number) => {
  switch (status) {
    case 1: return 'btn-group-buy'
    case 2: return 'btn-upcoming'
    case 3: return 'btn-ended'
    default: return 'btn-default'
  }
}

// 获取按钮文本
const getButtonText = (status: number) => {
  switch (status) {
    case 1: return '立即参团'
    case 2: return '即将开始'
    case 3: return '已结束'
    default: return '查看详情'
  }
}

// 返回上一页
const handleBack = () => {
  uni.navigateBack()
}

// 分享功能
const handleShare = () => {
  uni.share({
    provider: 'weixin',
    scene: 'WXSceneSession',
    type: 0,
    href: 'https://example.com/product/1',
    title: productDetail.title,
    summary: productDetail.description,
    imageUrl: productDetail.images[0].url,
    success: () => {
      uni.showToast({
        title: '分享成功',
        icon: 'success'
      })
    },
    fail: () => {
      uni.showToast({
        title: '分享失败',
        icon: 'error'
      })
    }
  })
}

// 预览图片
const handlePreviewImage = (index: number) => {
  const urls = productDetail.images.map(img => img.url)
  uni.previewImage({
    current: index,
    urls: urls
  })
}

// 点赞功能
const handleLike = () => {
  isLiked.value = !isLiked.value
  uni.showToast({
    title: isLiked.value ? '点赞成功' : '取消点赞',
    icon: 'success'
  })
}

// 收藏功能
const handleCollect = () => {
  isCollected.value = !isCollected.value
  uni.showToast({
    title: isCollected.value ? '收藏成功' : '取消收藏',
    icon: 'success'
  })
}

// 团购处理
const handleGroupBuy = () => {
  if (productDetail.status === 1) {
    // 跳转到团购页面
    uni.navigateTo({
      url: `/pages/community-group-buying/buy?id=${productDetail.id}`
    })
  } else if (productDetail.status === 2) {
    uni.showToast({
      title: '团购尚未开始',
      icon: 'none'
    })
  } else if (productDetail.status === 3) {
    uni.showToast({
      title: '团购已结束',
      icon: 'none'
    })
  }
}

// 页面加载
onMounted(() => {
  console.log('商品详情页面加载完成')
})
</script>

<style lang="scss" scoped>
.product-detail {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-bottom: 120rpx;
}

.page-header {
  background: linear-gradient(135deg, #ff4d4f 0%, #ff7875 100%);
  padding: 20rpx 30rpx;
  
  .header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    .back-btn,
    .share-btn {
      width: 60rpx;
      height: 60rpx;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .header-title {
      font-size: 32rpx;
      font-weight: 600;
      color: #fff;
    }
  }
}

.product-content {
  .product-images {
    position: relative;
    width: 100%;
    height: 500rpx;
    
    .image-swiper {
      width: 100%;
      height: 100%;
      
      .swiper-image {
        width: 100%;
        height: 100%;
      }
    }
    
    .product-badges {
      position: absolute;
      top: 20rpx;
      left: 20rpx;
      display: flex;
      gap: 12rpx;
      
      .badge {
        padding: 8rpx 16rpx;
        border-radius: 20rpx;
        font-size: 20rpx;
        
        &.hot-badge {
          background: linear-gradient(45deg, #ff6b6b, #ff8e8e);
          color: #fff;
        }
        
        &.discount-badge {
          background: linear-gradient(45deg, #ff4d4f, #ff7875);
          color: #fff;
        }
      }
    }
  }
  
  .product-info {
    background-color: #fff;
    padding: 40rpx 30rpx;
    margin-bottom: 20rpx;
    
    .info-header {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      margin-bottom: 20rpx;
      
      .product-title {
        flex: 1;
        font-size: 36rpx;
        font-weight: 600;
        color: #333;
        line-height: 1.4;
        margin-right: 20rpx;
      }
      
      .product-category {
        flex-shrink: 0;
      }
    }
    
    .info-body {
      margin-bottom: 30rpx;
      
      .product-description {
        font-size: 28rpx;
        color: #666;
        line-height: 1.6;
      }
    }
    
    .info-meta {
      .price-section {
        display: flex;
        align-items: center;
        gap: 20rpx;
        margin-bottom: 30rpx;
        
        .current-price {
          font-size: 40rpx;
          font-weight: 600;
          color: #ff4d4f;
        }
        
        .original-price {
          font-size: 28rpx;
          color: #999;
          text-decoration: line-through;
        }
        
        .discount-info {
          .discount-text {
            font-size: 24rpx;
            color: #52c41a;
            background-color: #f6ffed;
            padding: 4rpx 12rpx;
            border-radius: 12rpx;
          }
        }
      }
      
      .progress-section {
        .progress-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 12rpx;
          
          .progress-label {
            font-size: 28rpx;
            color: #333;
            font-weight: 500;
          }
          
          .progress-count {
            font-size: 26rpx;
            color: #ff4d4f;
            font-weight: 500;
          }
        }
        
        .progress-bar {
          width: 100%;
          height: 12rpx;
          background-color: #f0f0f0;
          border-radius: 6rpx;
          overflow: hidden;
          margin-bottom: 8rpx;
          
          .progress-fill {
            height: 100%;
            background: linear-gradient(90deg, #ff4d4f, #ff7875);
            border-radius: 6rpx;
            transition: width 0.3s ease;
          }
        }
        
        .progress-text {
          font-size: 24rpx;
          color: #999;
        }
      }
    }
  }
  
  .product-details,
  .product-specs,
  .group-buying-notice,
  .product-reviews {
    background-color: #fff;
    padding: 40rpx 30rpx;
    margin-bottom: 20rpx;
    
    .section-title {
      display: flex;
      align-items: center;
      gap: 12rpx;
      margin-bottom: 20rpx;
      
      .title-text {
        font-size: 30rpx;
        font-weight: 600;
        color: #333;
      }
      
      .review-count {
        font-size: 24rpx;
        color: #999;
      }
    }
    
    .details-content {
      :deep(p) {
        font-size: 28rpx;
        color: #333;
        line-height: 1.6;
        margin-bottom: 20rpx;
      }
      
      :deep(strong) {
        font-weight: 600;
        color: #ff4d4f;
      }
    }
    
    .specs-content {
      .spec-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 16rpx 0;
        border-bottom: 1rpx solid #f0f0f0;
        
        &:last-child {
          border-bottom: none;
        }
        
        .spec-label {
          font-size: 26rpx;
          color: #666;
        }
        
        .spec-value {
          font-size: 26rpx;
          color: #333;
          font-weight: 500;
        }
      }
    }
    
    .notice-content {
      .notice-item {
        display: flex;
        align-items: flex-start;
        gap: 12rpx;
        margin-bottom: 16rpx;
        
        &:last-child {
          margin-bottom: 0;
        }
        
        .notice-text {
          flex: 1;
          font-size: 28rpx;
          color: #666;
          line-height: 1.5;
        }
      }
    }
    
    .reviews-content {
      .review-item {
        padding: 20rpx 0;
        border-bottom: 1rpx solid #f0f0f0;
        
        &:last-child {
          border-bottom: none;
        }
        
        .review-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 12rpx;
          
          .user-info {
            display: flex;
            align-items: center;
            gap: 12rpx;
            
            .user-name {
              font-size: 26rpx;
              color: #333;
              font-weight: 500;
            }
          }
          
          .review-time {
            font-size: 24rpx;
            color: #999;
          }
        }
        
        .review-content {
          font-size: 26rpx;
          color: #666;
          line-height: 1.5;
        }
      }
    }
  }
}

.bottom-actions {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  padding: 20rpx 30rpx;
  border-top: 1rpx solid #f0f0f0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  
  .action-left {
    display: flex;
    gap: 40rpx;
    
    .action-btn {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8rpx;
      
      .btn-text {
        font-size: 24rpx;
        color: #999;
        
        &.liked {
          color: #ff4757;
        }
        
        &.collected {
          color: #ffa502;
        }
      }
    }
  }
  
  .action-right {
    .group-buy-btn {
      padding: 20rpx 60rpx;
      border-radius: 40rpx;
      font-size: 28rpx;
      font-weight: 500;
      text-align: center;
      transition: all 0.3s ease;
      
      &.btn-group-buy {
        background-color: #ff4d4f;
        color: #fff;
        
        &:active {
          background-color: #d9363e;
        }
      }
      
      &.btn-upcoming {
        background-color: #faad14;
        color: #fff;
      }
      
      &.btn-ended {
        background-color: #d9d9d9;
        color: #666;
      }
    }
  }
}
</style>
